<template>
  <el-dialog v-bind="dialog" :visible.sync="dialog.visible">
    <div>
      弹出窗内容
      <div class="demo-drawer__footer">
        <el-button type="primary" size="medium" :loading="loading" @click="handleSave()">{{ loading ? '提交中 ...' : '确 定' }} </el-button>
        <el-button type="primary" plain size="medium" @click="handleCancel()">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { temporaryApi } from '@/api/api'
const defaultModel = {
  value1: [],
  value2: ''
}
export default {
  components: {},
  data() {
    return {
      dialog: {
        width: '490px',
        visible: false,
        title: '弹出窗',
        closeOnClickModal: false
      },
      form: {
        labelWidth: '100px',
        labelPosition: 'right',
        model: Object.assign({}, defaultModel)
      },
      rules: {}
    }
  },
  methods: {
    open(row) {
      console.log(row)
      this.dialog.visible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 保存
    handleSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.$request(temporaryApi.gameBitGroupAdd, this.form.model).then((res) => {
            if (res.code === 1) {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.$emit('refresh')
              this.settings.visible = false
            }
          })
          this.loading = false
        }
      })
    },
    // 取消
    handleCancel() {
      this.form.model = Object.assign({}, defaultModel)
      this.dialog.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-drawer__footer {
  text-align: right;
}
.tip {
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #304f9c;
}
::v-deep.components {
  .el-select {
    width: 100%;
  }
}
</style>
